<script setup lang="ts">
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import {ConfigControllerService, SetControllerService, SetOptionVO, SetVO} from "../../../../generated"
import draggable from 'vuedraggable'
import {Rank} from '@element-plus/icons-vue'
import SetSelectionDialog from './SetSelectionDialog.vue'

// 推荐题集管理
const recommendSelectDialogVisible = ref(false)
const recommendList = ref<SetOptionVO[]>([])
const recommendHasChanges = ref(false)

// 选择推荐题集
const handleSelectRecommendSet = (set: SetVO) => {
  recommendList.value.push({
    label: set.title,
    value: set.id
  })
  recommendHasChanges.value = true
}

// 获取推荐题集列表
const fetchRecommendSets = async () => {
  try {
    const res = await SetControllerService.listRecommendUsingGet()
    if (res.data) {
      recommendList.value = res.data
    }
  } catch (error) {
    ElMessage.error('获取推荐题集列表失败')
  }
}

// 保存推荐题集
const saveRecommendSets = async () => {
  const idList = recommendList.value.map((item) => String(item.value))
  let res = await ConfigControllerService.updateToolbarSetUsingPost({
    idList
  });
  if (res.code === 0 && res.data) {
    ElMessage.success('更新成功');
    await fetchRecommendSets();
  } else {
    ElMessage.success(res.message)
  }
}

// 删除推荐题集
const deleteRecommendSet = (value: string) => {
  recommendList.value = recommendList.value.filter(item => item.value !== value)
  recommendHasChanges.value = true
}

// 初始化数据
fetchRecommendSets()
</script>

<template>
  <el-card class="manage-section">
    <template #header>
      <div class="card-header">
        <span>筛选工具栏题集管理</span>
        <div class="header-actions">
          <el-button
              type="primary"
              :disabled="!recommendHasChanges"
              @click="saveRecommendSets"
          >
            保存修改
          </el-button>
          <el-button
              type="primary"
              @click="recommendSelectDialogVisible = true"
          >
            添加题集
          </el-button>
        </div>
      </div>
    </template>

    <el-empty v-if="recommendList.length===0" description="no data"/>

    <draggable
        v-model="recommendList"
        item-key="value"
        handle=".drag-handle"
        :animation="150"
        ghost-class="ghost-class"
    >
      <template #item="{ element }">
        <div class="study-plan-item">
          <el-icon class="drag-handle">
            <Rank/>
          </el-icon>
          <div class="study-plan-info">
            <div class="submission-title">{{ element.label }}</div>
          </div>
          <el-button
              type="danger"
              size="small"
              @click="deleteRecommendSet(element.value)"
          >
            删除
          </el-button>
        </div>
      </template>
    </draggable>

    <!-- 选择推荐题集对话框 -->
    <SetSelectionDialog
        v-model:visible="recommendSelectDialogVisible"
        title="选择推荐题集"
        :existing-ids="recommendList.map(item => item.value).filter((id): id is string => id !== undefined)"
        @select="handleSelectRecommendSet"
    />
  </el-card>
</template>

<style scoped>
.manage-section {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  font-weight: bold;
}

.study-plan-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

.drag-handle {
  cursor: move;
  margin-right: 15px;
  color: #909399;
}

.study-plan-info {
  flex: 1;
  margin: 0 15px;
}

.study-plan-info .submission-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

:deep(.ghost-class) {
  opacity: 0.5;
  background: #c8ebfb;
  border: 1px dashed #409eff;
}
</style>